<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello React</title>
    <link rel="stylesheet" href="03.table.css">
</head>
<body>
	<div id="app">
		
	</div>
	<script src="//cdn.bootcss.com/react/15.4.2/react.js"></script>
	<script src="//cdn.bootcss.com/react/15.4.2/react-dom.js"></script>
	<script>
        var headers = [
            "Book", "Author", "Language", "Published", "Sales"
        ];
        var data = [
            ["The Lord of the Rings", "J. R. R. Tolkien", "English", "1954–1955", "150 million"],
            ["Le Petit Prince (The Little Prince)", "Antoine de Saint-Exupéry", "French", "1943", "140 million"],
            ["Harry Potter and the Philosopher's Stone", "J. K. Rowling", "English", "1997", "107 million"],
            ["And Then There Were None", "Agatha Christie", "English", "1939", "100 million"],
            ["Dream of the Red Chamber", "Cao Xueqin", "Chinese", "1754–1791", "100 million"],
            ["The Hobbit", "J. R. R. Tolkien", "English", "1937", "100 million"],
            ["She: A History of Adventure", "H. Rider Haggard", "English", "1887", "100 million"],
        ];
        var Excel = React.createClass({
            displayName: 'Excel',
//            propTypes: {
//                headers: React.PropTypes.arrayOf(React.PropTypes.string),
//                initialData: React.PropTypes.arrayOf(React.PropTypes.string)
//            },
            getInitialState: function () {
                return {
                    data: this.props.initialData,
                    sortby: null, // 排列
                    descending: false, // 升序还是降序
                    edit: null, // {row: index, cell: index}
					search: false
                }
            },
            _preSearchData: null, // 保留数据原本
            _sort: function (e) {
                var column = e.target.cellIndex;
                // 复制数据
                var data = this.state.data.slice();
                var descending = this.state.sortby === column && !this.state.descending;
                data.sort(function (a, b) {
                    return descending
                            ? (a[column] < b[column] ? 1: -1)
                            : (a[column] > b[column] ? 1: -1);
                });
                this.setState({
                    data: data,
                    sortby: column,
                    descending: descending
                })
            },
            // 编辑
            _showEditor: function (e) {
                this.setState({edit: {
                    row: parseInt(e.target.dataset.row, 10),
                    cell: e.target.cellIndex
                }})
            },
            _save: function (e) {
                e.preventDefault();
                // 保存操作
                var input = e.target.firstChild;
                var data = this.state.data.slice();
                data[this.state.edit.row][this.state.edit.cell] = input.value;
                this.setState({
                    edit: null, // 完成编辑
                    data: data,
                });
            },
            render: function () {
                return (
                    React.DOM.div(null,
                        this._renderToolbar(),
                        this._renderTable()
                    )
                );
            },
            _renderToolbar: function () {
                return React.DOM.button({
                    onClick: this._toggleSearch,
                    className: 'toolbar'
                }, 'search');
            },
            _renderTable: function () {
                return React.DOM.table(null,
                    React.DOM.thead({onClick: this._sort},
                        React.DOM.tr(null,
                            this.props.headers.map(function (title, index) {
                                if(this.state.sortby === index) {
                                    title += this.state.descending ? ' \u2191': ' \u2193'
                                }
                                return React.DOM.th({key: index}, title);
                            }, this)
                        )
                    ),
                    React.DOM.tbody({onDoubleClick: this._showEditor},
                        this._renderSearch(),
                        this.state.data.map(function (row, rowidx) {
                            return (
                                React.DOM.tr({key: rowidx},
                                    row.map(function (cell, index) {
                                        var content = cell;
                                        var edit = this.state.edit;
                                        // 判断是否为待编辑单元格
                                        if(edit && edit.row === rowidx && edit.cell === index) {
                                            content = React.DOM.form({onSubmit: this._save},
                                                React.DOM.input({
                                                    type: 'text',
                                                    defaultValue: content
                                                })
                                            )
                                        }

                                        return React.DOM.td({
                                            key: index,
                                            'data-row': rowidx
                                        }, content);
                                    }, this)
                                )
                            );
                        }, this)
                    )
				);
            },
            _toggleSearch: function () {
                if (this.state.search) {
                    this.setState({
                        data: this._preSearchData,
                        search: false
                    });
                    this._preSearchData = null;
                }else {
                    this._preSearchData = this.state.data; // 保留之前完整的数据
                    this.setState({
                        search: true
                    });
                }
            },
            _renderSearch: function () {
                if (!this.state.search) {
                    return null;
                }
                return (
                    React.DOM.tr({onChange: this._search},
                        this.props.headers.map(function (_ignore, index) {
                            return React.DOM.td({key: index},
                                React.DOM.input({
                                    type: 'text',
                                    'data-idx': index
                                })
                            );
                        })
                    )
                );
            },
            _search: function (e) {
                var needle = e.target.value.toLowerCase();
                if(!needle) {
                    // 当搜索字符串被删除时
                    this.setState({data: this._preSearchData});
                    return;
                }
                var idx = e.target.dataset.idx; // 需要搜索的那一列的索引值
                var searchdata = this._preSearchData.filter(function (row) {
                    return row[idx].toString().toLowerCase().indexOf(needle) > -1;
                });
                this.setState({data: searchdata});
            }
        });



		ReactDOM.render(
			React.createElement(Excel, {
			    headers: headers,
                initialData: data
            }),
			document.getElementById("app")
		);
	</script>
</body>
</html>